
<template>
  <main-container headerText="商品库管理 >> 商品选择">
    <div class="content" :key="showPageKey">
      <top-option>
        <div slot="left-box">
          <input-search
            lableName="商品名称"
            inputValue="name"
            :tThis="this"
            inputPlaceholder="请输入商品名称"
          />

          <!-- <select-search
            lableName="类型"
            selectIdName="type"
            :tThis="this"
            selectPlaceholder="请选择类型"
            :selectOpts="typeOpts"
            selectWidth="150px;"
            labelWidth="80px;"
          /> -->

          <select-search
            lableName="一级分类"
            selectIdName="catCode"
            :tThis="this"
            selectPlaceholder="请选择一级分类"
            :selectOpts="catCodeOpts"
            selectWidth="150px;"
            labelWidth="80px;"
          />

          <select-search
            lableName="二级分类"
            selectIdName="superCode"
            :tThis="this"
            selectPlaceholder="请选择二级分类"
            :selectOpts="superCodeOpts"
            selectWidth="150px;"
            labelWidth="80px;"
          />

          <select-search
            lableName="三级分类"
            selectIdName="classCode"
            :tThis="this"
            selectPlaceholder="请选择三级分类"
            :selectOpts="classCodeOpts"
            selectWidth="150px;"
            labelWidth="80px;"
          />
        </div>
        <div slot="right-box">
          <div class="sub">
            <el-button @click="handleSearch" class="orange">查询</el-button>
            <!-- <el-button @click="handleAdd">新增商品</el-button> -->
          </div>
        </div>
      </top-option>

      <top-option>
        <div slot="left-box">
          <el-button @click="goodSet" class="orange" v-if="typeParam == '1'"
            >设置为拼了吗</el-button
          >
          <el-button @click="goodSet" class="orange" v-if="typeParam == '2'"
            >设置为天天特卖推荐</el-button
          >
          <el-button @click="goodSet" class="orange" v-if="typeParam == '3'"
            >设置为大家都想买</el-button
          >
        </div>
      </top-option>

      <!-- 列表栏 -->
      <div class="list">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; border-radius: 4px"
          class="tableBox"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="序号" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.index || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="商品名" width="200">
            <template slot-scope="scope">
              {{ scope.row.name || "-" }}
            </template>
          </el-table-column>

          <el-table-column label="类型" width="undefined">
            <template slot-scope="scope">{{
              typeShow[scope.row.type + ""] || "-"
            }}</template>
          </el-table-column>
          <el-table-column label="一级分类" width="undefined">
            <template slot-scope="scope">
              {{ catCodeShows[scope.row.catCode] }}
            </template>
          </el-table-column>
          <el-table-column label="二级分类" width="undefined">
            <template slot-scope="scope">
              {{ superCodeShows[scope.row.superCode] || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="三级分类" width="undefined">
            <template slot-scope="scope">
              {{ classCodeShows[scope.row.classCode] || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="品牌" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.brandName || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="成本价" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.floorPrice || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="京东价格" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.price || "-" }}
            </template>
          </el-table-column>

          <el-table-column label="商品主图" width="undefined">
            <template slot-scope="scope">
              <div v-if="scope.row.imagePath" style="height: 100px">
                <el-image
                  :src="scope.row.imagePath"
                  :preview-src-list="[scope.row.imagePath]"
                >
                </el-image>
              </div>
              <div v-else>未上传图片</div>
            </template>
          </el-table-column>
          <el-table-column label="库存" width="undefined">
            <template slot-scope="scope">
              {{ scope.row.inventory || "-" }}
            </template>
          </el-table-column>

          <el-table-column label="状态" width="undefined">
            <template slot-scope="scope">{{
              stateShow[scope.row.state + ""] || "-"
            }}</template>
          </el-table-column>

          <!-- <el-table-column label="操作" width="240">
            <template slot-scope="scope">
              <el-button
                @click="handleModify"
                type="primary"
                :data-id="scope.row.id"
                size="small"
                >编辑</el-button
              >
              <el-button
                @click="handleDelete"
                type="warning"
                :data-id="scope.row.id"
                size="small"
                >删除</el-button
              >

              <el-button
                v-if="scope.row.state == '2'"
                @click="handleChangeStateOpen"
                type="primary"
                :data-id="scope.row.id"
                size="small"
                >上架</el-button
              >
              <el-button
                v-if="scope.row.state == '1'"
                @click="handleChangeStateClose"
                type="warning"
                :data-id="scope.row.id"
                size="small"
                >下架</el-button
              >
            </template>
          </el-table-column> -->
          
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="paging">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPageIdx"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="onePageSize"
            layout="total, prev, pager, next, jumper"
            :total="pageCount"
          ></el-pagination>
        </div>

        <div class="confirm-btn">
          <el-button class="paging-btn" @click="handleEnter" size="small"
            >确定</el-button
          >
        </div>
      </div>
    </div>
  </main-container>
</template>

  <script>
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

import main_container from "@/components/main_container";
import top_option from "@/components/subCon/topOption";
import input_search from "@/components/subCon/inputSearch";
import select_search from "@/components/subCon/selectSearch";
import date_search from "@/components/subCon/dateSearch";

export default {
  components: {
    "main-container": main_container,
    "top-option": top_option,
    "input-search": input_search,
    "select-search": select_search,
    "date-search": date_search,
  },
  props: {},
  data() {
    return {
      //列表
      tableData: [],
      multipleSelection: [],
      //分页
      currentPageIdx: 1, //当前页与跳转框的初始值
      pageCount: 1, //总条数
      onePageSize: 10, //每页的条数

      formData: {
        name: null,
        type: null,
        catCode: null,
        superCode: null,
        classCode: null,
      },

      showPageKey: 100,

      typeOpts: [
        { value: "1", label: "普消" },
        { value: "2", label: "易物" },
        { value: "", label: "请选择" },
      ],

      catCodeOpts: [{ value: "", label: "请选择" }],

      superCodeOpts: [{ value: "", label: "请选择" }],
      classCodeOpts: [{ value: "", label: "请选择" }],

      classCodeShows: {},
      catCodeShows: {},
      superCodeShows: {},

      typeShow: {
        1: "普消",
        2: "易物",
      },
      stateShow: {
        1: "上架",
        2: "下架",
      },

      allMethods: "",

      typeParam: "",
      ids: [],
    };
  },
  mounted() {
    console.log("路由参数：" + this.$route.query.type);
    this.typeParam = this.$route.query.type + "";

    this.allMethods = this.getAllMethods();
    this.getSort_1();
    this.getSort_2();
    this.getSort_3();
    this.initRequest();

    this.getInitData();
  },

  //初始加载分类列表
  watch: {
    "formData.catCode"() {
      this.getSort_2();
    },
    "formData.superCode"() {
      this.getSort_3();
    },
  },
  methods: {
    //勾选
    handleSelectionChange(val) {
      console.log(val);
      this.ids = [];
      for (var i = 0; i < val.length; i++) {
        this.ids.push(val[i].id);
      }
    },
    //商品设置
    goodSet() {
      console.log(this.ids);
      if (this.ids.length == 0) {
        this.$alert("请勾选要设置的记录", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
        return;
      }
      //return;
      var url = API.good_classify_m.add;
      var data = {
        shopGoodIds: this.ids,
        type: this.typeParam,
      };
      console.log("参数", data);
      jhTools.post(
        url,
        data,
        null,
        (res) => {
          console.log("结果", res);
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.$router.push({
              path: "/good_classify_m_good_classify_m_table",
              name: "good_classify_m_good_classify_m_table",
            });
            //清空勾选
            this.$refs.multipleTable.clearSelection();
          } else {
            _this.$message({
              type: "warning",
              message: res.message,
            });
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },

    /* 一级分类change */
    oneSortChangeF() {
      this.formData.superCode = "";
      this.formData.classCode = "";
      this.getSort_2();
    },

    /* 二级分类change */
    twoSortChangeF() {
      this.formData.classCode = "";
      this.getSort_3();
    },

    //上架
    handleChangeStateOpen(e) {
      this.allMethods.handleChangeStateOpen(e);
    },

    //下架
    handleChangeStateClose(e) {
      this.allMethods.handleChangeStateClose(e);
    },

    //一级分类获取
    getSort_1() {
      this.allMethods.getSort_1();
    },
    //二级分类获取
    getSort_2() {
      this.allMethods.getSort_2();
    },
    //三级分类获取
    getSort_3() {
      this.allMethods.getSort_3();
    },

    //编辑
    handleModify(e) {
      this.allMethods.handleModify(e);
    },

    //删除
    handleDelete(e) {
      this.allMethods.handleDelete(e);
    },

    //查询
    handleSearch() {
      this.allMethods.handleSearch();
    },
    //新增商品
    handleAdd(e) {
      this.allMethods.handleAdd(e);
    },

    //刷新
    refreshF() {
      this.showPageKey = this.tools.getRandomStr();
    },

    /* 方法抽离集合 */
    getAllMethods() {
      var _this = this;
      return {
        //上架
        handleChangeStateOpen(e) {
          const { id } = e.currentTarget.dataset;
          var url = API.cur_goods_m.changeState;
          var data = { id, state: 1 };
          console.log("参数", data);

          jhTools.post(
            url,
            data,
            null,

            (res) => {
              console.log("结果", res);
              if (res.code == 200) {
                _this.$message({
                  type: "success",
                  message: "操作成功",
                });
                _this.getInitData();
              } else {
                _this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );
        },

        //下架
        handleChangeStateClose(e) {
          const { id } = e.currentTarget.dataset;
          var url = API.cur_goods_m.changeState;
          var data = { id, state: 2 };
          console.log("参数", data);

          jhTools.post(
            url,
            data,
            null,

            (res) => {
              console.log("结果", res);
              if (res.code == 200) {
                _this.$message({
                  type: "success",
                  message: "操作成功",
                });
                _this.getInitData();
              } else {
                _this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );
        },

        //一级分类获取
        getSort_1() {
          var url = API.jd_sort_m.page;
          var data = {
            pageIndex: 1,
            pageSize: 10000,
            // "catCode": _this.formData.catCode,
            classType: "1",
          };
          console.log("参数", data);
          jhTools.post(
            url,
            data,
            null,
            (res) => {
              console.log("结果", res);
              if (res.code == 200) {
                var opts = _this.catCodeOpts ? _this.catCodeOpts : [];
                var records = res.data.records || res.data || [];
                records.forEach((item, index) => {
                  opts.push({
                    label: item.className + "",
                    value: item.classCode + "",
                  });
                  //展示字段
                  _this.catCodeShows[item.classCode + ""] = item.className;
                });
                _this.refreshF();
                _this.catCodeOpts = opts;
              } else {
                _this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );
        },

        //二级分类获取
        getSort_2() {
          var url = API.jd_sort_m.page;
          var data = {
            pageIndex: 1,
            pageSize: 10000,
            catCode: _this.formData.catCode,
            classType: "2",
          };
          console.log("参数", data);
          jhTools.post(
            url,
            data,
            null,
            (res) => {
              console.log("结果", res);
              if (res.code == 200) {
                //清空
                _this.superCodeOpts = [{ value: "", label: "请选择" }];
                var opts = _this.superCodeOpts ? _this.superCodeOpts : [];

                var records = res.data.records || res.data || [];
                console.log(_this.superCodeOpts);
                records.forEach((item, index) => {
                  opts.push({
                    label: item.className + "",
                    value: item.classCode + "",
                  });
                  //展示字段
                  _this.superCodeShows[item.classCode] = item.className;
                });
                _this.refreshF();
                if (_this.formData.catCode) {
                  _this.superCodeOpts = opts;
                }
              } else {
                _this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );
        },
        //三级分类获取
        getSort_3() {
          var url = API.jd_sort_m.page;
          var data = {
            pageIndex: 1,
            pageSize: 10000,
            superCode: _this.formData.superCode,
            classType: "3",
          };
          console.log("参数", data);
          jhTools.post(
            url,
            data,
            null,
            (res) => {
              console.log("结果", res);
              if (res.code == 200) {
                //清空
                _this.classCodeOpts = [{ value: "", label: "请选择" }];
                var opts = _this.classCodeOpts ? _this.classCodeOpts : [];
                var records = res.data.records || res.data || [];
                records.forEach((item, index) => {
                  opts.push({
                    label: item.className + "",
                    value: item.classCode + "",
                  });
                  //展示字段
                  _this.classCodeShows[item.classCode] = item.className;
                });
                _this.refreshF();
                if (_this.formData.superCode) {
                  _this.classCodeOpts = opts;
                }
              } else {
                _this.$message({
                  type: "warning",
                  message: res.message,
                });
              }
            },
            (err) => {
              console.log(err);
            }
          );
        },

        //编辑
        handleModify(e) {
          var { id } = e.currentTarget.dataset;
          _this.$router.push({
            path: "/cur_goods_m_add_cur_goods",
            query: { id },
          });
        },

        //删除
        handleDelete(e) {
          const { id } = e.currentTarget.dataset;
          var url = API.cur_goods_m.del;
          var data = { id };
          console.log("参数", data);
          _this
            .$confirm("是否确认删除？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
            .then(() => {
              jhTools.get(
                url,
                null,
                data,

                (res) => {
                  console.log("结果", res);
                  if (res.code == 200) {
                    _this.$message({
                      type: "success",
                      message: "操作成功",
                    });
                    _this.getInitData();
                  } else {
                    _this.$message({
                      type: "warning",
                      message: res.message,
                    });
                  }
                },
                (err) => {
                  console.log(err);
                }
              );
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        },

        //查询
        handleSearch() {
          var { name, catCode, superCode, classCode } = _this.formData;
          _this.LingChuang_request.handleSearch({
            name,
            type: 1, //普消
            catCode,
            superCode,
            classCode,
            pageIndex: _this.currentPageIdx,
            pageSize: _this.onePageSize,
          });
        },
        //新增商品
        handleAdd(e) {
          _this.$router.push({
            path: "/cur_goods_m_add_cur_goods",
            query: {},
          });
        },
      };
    },

    //表格默认函数
    //初始化
    initRequest() {
      this.LingChuang_request = jhTools.LingChuang_request({
        this: this,
        pageUrl: API.cur_goods_m.page,
        searchUrl: API.cur_goods_m.page,
        searchData: {},
      });
      // console.log(this.LingChuang_request);
    },
    //加载数据
    getInitData: function () {
      var _this = this;
      this.LingChuang_request.getInitData(
        {
          pageIndex: this.currentPageIdx,
          pageSize: this.onePageSize,
          type: 1, //普消
          
        },
        function (res) {
          //初始格式化数据
        }
      );
    },
    //格式化数据
    formatData() {
      this.LingChuang_request.formatData();
    },
    //格式化页面
    formatPaging(res) {
      this.LingChuang_request.formatPaging(res);
    },
    //页数跳转
    handleSizeChange(val) {
      this.LingChuang_request.handleSizeChange(val);
    },
    //页面点击跳转
    handleCurrentChange(val) {
      this.LingChuang_request.handleCurrentChange(val);
    },
    //enter跳转
    handleEnter() {
      this.LingChuang_request.getPagingData(
        this.currentPageIdx,
        this.onePageSize
      );
    },
    //分页数据
    getPagingData(pageIndex, pageSize) {
      this.LingChuang_request.handleEnter(pageIndex, pageSize);
    },
    //列表勾选1
    toggleSelection(rows) {
      this.LingChuang_request.toggleSelection(rows);
    },
    //列表勾选2
    // handleSelectionChange(val) {
    //   this.LingChuang_request.handleSelectionChange(val);
    // },
    //表格默认函数

    /* 图片预览 */
    previewImgF({ imgUrl }) {
      this.tools.touchGEvent({
        eName: "previewImg",
        imgUrl,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

//隐藏样式类
.hidden {
  display: none !important;
}
</style>
